<script setup>
import {defineProps,defineEmits,ref} from 'vue'
const props = defineProps({
  total: Number,
  pageNum: Number,
  pageSize: Number
})
const current = ref(props.pageNum)
const size = ref(props.pageSize)
const emits = defineEmits(['currentChange','sizeChange'])
// 当前页改变
function handleCurrentChange(val){
  emits('currentChange',val)
}
// 分页大小改变
function handleSizeChange(val){
  emits('sizeChange',val)
}
</script>
<template>
  <el-pagination
    class="pagination"
    v-model:current-page="current"
    v-model:page-size="size"
    :page-sizes="[10, 20, 50, 100]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<style lang="less" scoped>
.pagination{
  height: 80px;
  line-height: 80px;
}

</style>
